<template>
  <div class="chat-input">
    <input
      type="text"
      v-model="message"
      @keyup.enter="sendMessage"
      placeholder="请输入消息.."
    />
    <button @click="sendMessage">发送</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  methods: {
    sendMessage () {
      const trimmedMessage = this.message.trim()
      if (trimmedMessage !== '') {
        this.$emit('new-message', { from: 'sender2', content: trimmedMessage })
        this.message = ''
      } else {
        console.log('请输入有效的消息内容')
      }
    }
  }
}
</script>

<style scoped>
.chat-input {
  display: flex;
  padding: 10px;
}

.chat-input input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

.chat-input button {
  padding: 8px 15px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>
